<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			#Title {
				text-align: center;
				background-color: whitesmoke;

				margin-bottom: 4px;
			}

			#table {
				margin-top: 5px;
				font-size: 10px;
				width: 100%;
				padding: 0px 10px;
				text-align: center;
			}

			#table tr {
				box-shadow: 0px 2px 3px #e8e8e8;
			}

			#table_title {
				background-color: red;
				color: white;
			}

			#table_title th,
			td {
				padding: 5px 0px;
			}
		</style>
	</head>
	<body>
		<div id="Title">
			<h4>订单列表</h4>
			<div style="font-size: 12px;">仅限查看用户订单</div>
		</div>
		<table id="table" cellspacing="0px">
			<tr id="table_title">
				<th>订单编号</th>
				<th>客户信息</th>
				<th>创建时间</th>
				<th>金额</th>
				<th>状态</th>
			</tr>
		</table>
	</body>
	<script>
		const table = document.querySelector("#table");
		const storage = window.localStorage;
		console.log(storage)

		function syncList() {
			if (storage.flag == 'false') {
				var strarr = JSON.parse(storage.list);
				table.innerHTML = "<tr id=table_title><th>订单编号</th><th>客户信息</th><th>创建时间</th><th>金额</th><th>状态</th></tr>"
				strarr.forEach((str) => {
					var tr = document.createElement("tr");
					str.split(",").forEach((data) => {
					var td = document.createElement("td");
					td.innerText=data;
					tr.appendChild(td);
					})
					table.appendChild(tr);
				})
				console.log("加载了")
				storage.flag=true;
			} else {
				console.log("已加载")
				return 0;
			}
		}
		window.onload = function() {
			storage.flag = 'false';//传入不是字串会自动转换,是就直接写
			syncList();
			setInterval(syncList,5000);
		}
	</script>
</html>